<template>
  <el-table :data="employees" v-loading="isLoading">
    <el-table-column prop="id" label="ID" width="80" sortable />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="department" label="部门" />
    <el-table-column prop="position" label="职位" />
    <el-table-column prop="salary" label="薪资" sortable>
      <template #default="{ row }">
        {{ row.salary.toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column prop="hireDate" label="入职日期" sortable>
      <template #default="{ row }">
        {{ formatDate(row.hireDate) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template #default="{ row }">
        <el-button @click="$emit('edit', row)">编辑</el-button>
        <el-button type="danger" @click="$emit('delete', row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { computed } from 'vue';
import { useEmployeeStore } from '@/stores/employeeStore';

const props = defineProps({
  employees: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['edit', 'delete']);

const employeeStore = useEmployeeStore();
const isLoading = computed(() => employeeStore.isLoading);

const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};
</script>